<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <style>
     .form-wrap{
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="form-wrap">
    <!-- 新增广告位表单 -->
    <form id="billboard_form" class="layui-form" method="post" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label">图片名称</label>
            <div class="layui-input-block">
                <input id="billboardName_input" name="billboardName" type="text" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="img_insert_div">
           <label class="layui-form-label">图片</label>
           <div class="layui-input-block">
					<img id="billboard_icon_file" name="imgViewPath" width="100px" style="display:none" height="100px" src=""/>
					<input type="button" id="change_billboard_icon_button" value="选择(375 * 200)"/>
					<input type="file" id="change_billboard_icon_input" name="file" style="display:none"/>
           </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序码</label>
            <div class="layui-input-block">
                <input type="text" name="sortCode"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
	            <textarea name="note" placeholder="广告位备注" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
           <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="status">
						<option value="1">正常</option>
						<option value="0">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block"> 
                <button class="layui-btn" type="button" onclick="billboardForm.submit()">提交</button>
            </div>
        </div>
    </form>
</div>
	<script src="../../publicjs/jquery-1.8.0.min.js"></script>
	<script src="../../publicjs/smallkingutil.js"></script>
	<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form', 'laydate', 'upload', 'element'], function(){
    var form = layui.form,
    	layer = layui.layer,
		upload = layui.upload;
	// 用户表单相关的操作对象
	window.billboardForm = {
		submit : function() {
			var billboardForm = document.getElementById("billboard_form");
			var formData = new FormData(billboardForm);
			var	url, msg, data;
			if(this.billboardId){
				url = commonUtil.domain() +"/admin/mall/billboard/update";
				msg = "修改";
				formData.set("billboardId", this.billboardId);
			}else{
				url = commonUtil.domain() +"/admin/mall/billboard/insert";
				msg = "新增";
			}
			var ajaxParam = {
				url : url
			}
			ajaxUtil.submitForm(formData, ajaxParam, function(data) {
				if (data.code == 200) {
					// 关闭当前的表单弹窗 刷新父级页面的数据表格
					var parentHtml = window.parent;
					parentHtml.layer.closeAll();
					parentHtml.billboardTable.refresh();
				} else {
					layer.msg(msg + "失败，请联系开发人员。");
				}
			});
		}
	}
	var billboardId = commonUtil.getRequestParam("billboardId");
	if (billboardId){
		billboardForm.billboardId = billboardId;
		// 请求后台得到当前修改的用户数据，将其显示在表单里
		var ajaxParam = {
			url : commonUtil.domain() +'/admin/mall/billboard/detail',
			data : {
				billboardId : billboardId
			}
		}
		ajaxUtil.post(ajaxParam, function(data) {
			formUtil.setForm($('#billboard_form'), data.data);
			$('#billboard_icon_file').show();
			$('#billboard_icon_file').attr("src", data.data.imgViewPath);
			$('#change_billboard_icon_button').val("更换");
			form.render("select");
		});
	}
});


$(function(){
	// 点击更换图片按钮
	commonUtil.setMaxLength(40);
	$('#change_billboard_icon_button').click(function() {
		$('#change_billboard_icon_input').click();
		document.getElementById("change_billboard_icon_input").onchange = function(){
			var imgFile = document.getElementById('change_billboard_icon_input').files[0];
			var fileName = imgFile.name.toLowerCase();
			if(!fileName.endWith("jpg") && !fileName.endWith("png")
					&& !fileName.endWith("gif") && !fileName.endWith("jpeg")){
				layer.msg('只支持jpg，png，gif类型图片');
				return;
			}
			var read = new FileReader();
			read.readAsDataURL(imgFile);
			read.onload = function (e) {
				$('#billboard_icon_file').show();
				$('#billboard_icon_file').attr("src", this.result);
			}
		};
	});
});
</script>
</body>
